<template>
  <div class="rate">
    <svg
      v-for="c in 5"
      :key="c"
      class="icon"
      viewBox="0 0 1024 1024"
      :width="size"
      :height="size"
      @click="setSource(c)"
    >
      <path
        d="M925.866667 458.666667c-61.866667 66.133333-164.266667 174.933333-164.266667 174.933333s19.2 155.733333 29.866667 243.2c4.266667 34.133333-49.066667 34.133333-49.066667 34.133333l-2.133333-2.133333c-81.066667-38.4-217.6-102.4-217.6-102.4s-140.8 66.133333-221.866667 104.533333c-32 14.933333-51.2-2.133333-46.933333-38.4 10.666667-89.6 29.866667-238.933333 29.866667-238.933333s-87.466667-93.866667-149.333333-160c-34.133333-36.266667-32-68.266667 4.266667-74.666667 87.466667-17.066667 236.8-44.8 236.8-44.8s81.066667-147.2 123.733333-224C512 102.4 531.2 102.4 546.133333 128c40.533333 74.666667 123.733333 226.133333 123.733333 226.133333S832 384 919.466667 401.066667C949.333333 407.466667 951.466667 430.933333 925.866667 458.666667z"
        :fill="source >= c ? '#dbd225' : '#999999'"
      ></path>
    </svg>
    <span class="source" :style="{ fontSize: size + 'px' }">{{
      source.toFixed(1)
    }}</span>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 20,
    },
    source: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    setSource(num) {
      console.log(num);
      this.$emit("update:source", num);
    },
  },
};
</script>

<style scoped>
.source {
  padding: 0 15px;
  vertical-align: middle;
}
.icon {
  vertical-align: middle;
}
</style>
